<template>
  <div class="fc_333 bg-F2 foodpad">
    <div v-show="isdata">
      <p id="boadringtext" class="padding-css3  bg-white">{{passengerName}},电子票号{{ticketNum}}</p>
      <div id="reservation" class="">
        <div class="margin-t-css1  ub-fh ">
          <div class="padding-css3 bg-white">
            <div class="border-botttom padding-b-css1">
              <p class="ub f16 ">
                <img class=" ub ub-ac flytoImg" src="./flyto.png">
                <span class="padding-l-css1 fightNo">{{flightNo}}</span>
                <span class="padding-l-css1 begin-endCity">{{beginCityName}}-{{endCityName}}</span>
              </p>
              <p class="ub  color-B2B2B2 padding-l-css2 padding-r-css1 mtb">
                起飞时间
                <span class="qifeiTime">{{depTime}}</span>
              </p>
              <p class="ub  color-B2B2B2 padding-l-css2 padding-r-css1 ">
                降落时间
                <span class="jiangluoTime">{{arrTime}}</span>
              </p>
            </div>
            <div class="padding-l-css2 ub ub-ver margin-t-css2">
              <div class="ub ub-f1 padding-b-css1 xinglichange" v-show="lugList.length!==0" @click="islug=true">
                <div class="ub-f1 ub ub-ver">
                  <div class="ub-f1 ub ub-ac lineHeight1"><img class="Img1 ub ub-ac" src="./order_pack.png">
                    <span class="ub ub-ac fontWei margin-l-css2">选购逾重行李规格</span>
                  </div>
                  <div :key="index" v-for="(item,index) in lugList" v-if="item.ischeck" class="ub-f1 ub-ac lineHeight1 ub f12">
                    <span class="ub ub-f1 margin-l-css1 yuzhongContent">{{item.goodsChName}}</span>
                    <span class=" yyPrice margin-r-css1 moneyColor">￥{{item.goodsPrice}}</span>
                  </div>
                </div>
                <div class="ub ub-pc"><img class="actImg1" src="./icon-back-act_1.png"></div>
              </div>
              <div class="footchange" v-show="mealList.length!==0" @click="isfood=true">
                <div class="ub ub-f1 padding-b-css1 ">
                  <div class="ub-f1 ub ub-ver">
                    <div class="ub-f1 ub ub-ac lineHeight1"><img class="Img1 ub ub-ac" src="./order_shipin.png">
                      <span class=" fontWei margin-l-css2">选择餐食</span>
                    </div>
                    <div class="ub-f1 ub ub-ver footlist yuzhongContent">
                      <div :key="index0" v-for="(goods,index0) in mealList">
                        <div :key="index" v-for="(item,index) in goods.data" v-if="item.ischeck" class="ub-f1 ub-ac lineHeight1 f12 ub">
                          <span class=" ub ub-f1 margin-l-css1">{{item.goodsChName}}</span>
                          <span class=" margin-r-css1 moneyColor">￥{{item.goodsPrice}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="ub ub-pc"><img class="actImg1" src="./icon-back-act_1.png"></div>
                </div>
              </div>
            </div>
            <div class="ub ub-pe margin-r-css2">
              <span>金额小计：</span>
              <span class="moneyColor fontWei xiaoji">￥{{priTot}}</span>
            </div>
          </div>
          <div class="margin-t-css1 bg-white ub-fh ">
            <div class="padding-css3  ">
              <div class="lxrContent bg-white ub-fh ">
                <div class=" border-botttom">
                  <div class="ub ub-ac">
                    <div class=" input-left">联系人</div>
                    <input id="LxName" v-model="LxName" class="ub ub-f1 Reservation-input f14" placeholder="请输入联系人姓名">
                  </div>
                </div>
                <div class="border-botttom">
                  <div class="ub  ub-ac">
                    <div class=" input-left">手机号码</div>
                    <input id="LxNum" v-model="LxNum" class="ub ub-f1 Reservation-input f14" placeholder="请输入联系人手机号码">
                  </div>
                </div>
                <div class="border-botttom">
                  <div class="ub  ub-ac">
                    <div class=" input-left">电子邮箱</div>
                    <input id="LxEmail" v-model="LxEmail" class="ub ub-f1 Reservation-input f14" placeholder="请输入联系人电子邮箱">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="height:1rem"></div>
      <div class="ub padding-css3 bg_w agree">
        <div class="ub ub-f1">
          <span class="">我已阅读并同意《增值服务购买须知》等</span>
          <br>
          <span class="color-main detaileds" @click="severText">各项服务条款</span>
        </div>
        <div class="ub ub-ac" @click="isAgree=!isAgree">
          <div class="ServerImg margin-t02 ServerImgs ub-img" :class="{'Agree':isAgree,'disAgree':!isAgree}"></div>
        </div>
      </div>
      <div style="height:3rem"></div>
      <div class="bg-white" data-control="FOOTER" id="Footer_Reservation">
        <div class="ub-fh ub-fv ub ub-ac ">
          <div class="ub-f1 ub   padding-css2">
            <div class="moneyColor fontWei ub-f1 SumPrice">￥{{priTot}}</div>
          </div>
          <div class="btn2 bg-color-main ub ub-ac  ub-pc" @click="submit">
            <span>提交订单</span>
          </div>
        </div>
      </div>
      <div v-show="islug" class="div-none" @click="islug = false"></div>
      <div v-show="isfood" style="opacity:1" class="div-none" @click="cancalFood">
        <div class="ub headerDiv ub-ac">
          <div class="ub left ub-pc">
            <div>关闭</div>
          </div>
          <div class="ub middle ub-pc">
            <div class="tx-c fz12">
              选择餐食
            </div>
          </div>
          <div class="ub right ub-pc">
          </div>
        </div>
      </div>
      <div v-show="islug" class="xingliyz bg-white ub-fh layertips padding-css1">
        <div class="ub-fh xingliyzList">
          <div class="changeyz ub padding-css3" @click="noLug">
            <div class="ub-f1 ">不需要补购</div>
            <div class="ub ub-ac ub-peimg5div"><img v-show="hasLug" class="img6 yzimg" src="./form_option_tick.png"></div>
          </div>
          <div :key="index" v-for="(item,index) in lugList" class="changeyz ub padding-css3 f12" @click="checkLug(index)">
            <div class="yuzhongidv">{{item.goodsChName}}</div>
            <div class="ub-f1">￥{{item.goodsPrice}}</div>
            <div class="ub ub-ac ub-pe img5div"><img class="img5 yzimg" v-show="item.ischeck" src="./form_option_tick.png"></div>
          </div>
        </div>
      </div>
      <div v-show="isfood" style="" class="xingliyz bg-white foodpad foodlist ub-fh layertips">
        <div class="ub-fh xingliyzList">
          <div :key="index0" v-for="(goodList,index0) in mealList">
            <div class="ub ub-ver f12  bg-white">
              <div datastate="0" id="reshititle" class="ub ub-ac bottom-height padding-01 ticket-border">
                <div class="f16 font-weigth-b ub-f1">{{goodList.typeName}}</div>

                <div class="ub ub-pe"><img class="img4" src="./arrow_down@2x.png"></div>
              </div>
            </div>
            <div>
              <div @click="checkFood(index0,index,item.ischeck)" :key="index" v-for="(item,index) in goodList.data" class="ub foots hot_meals ub-ac padding-01 indeximg-height ticket-border">
                <div class="ub ub-ac indeximg-height"><img class="index-height ub-img" :src="item.goodsPicture"></div>
                <div class="ub margin-l1 ub-f1 ub-ver ub-pc indeximg-height">
                  <div class="padding-b05 fname">{{item.goodsChName}}</div>
                  <div class="bc-FF9E04">￥
                    <span class="fprice">{{item.goodsPrice}}</span>
                  </div>
                </div>
                <div class="ub ub-pe ub-ac ub-pc indeximg-height"><img class="img4 cfootImg" v-show="item.ischeck===false" src="./form_radio.png"><img class="img4 cfootImg" v-show="item.ischeck===true" src="./form_tick.png"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="uf bg-white footerContent margin-t3" data-control="FOOTER" id="Footer_index">
          <div id="footerList" class="ub navItem-height ub-ac ub-pc f14 footerList">
            <div class="ub margin-l1 ub-f1 ub-ac navItem-height Footer">
              <div>合计：
                <span class="bc-FF9E04">￥
                  <span id="sumPrice">{{priTot}}</span>
                </span>
              </div>
            </div>
            <div @click="foodClick" class="width-30 qrbtn bg-843d99 bc-white ub ub-ac navItem-height ub-pc Footer">
              <div>确定选择</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pop-select-bottom" v-show="istics" @click="istics=false">
      <ul class="pop-select top">
        <div class="uinn">请选择行程</div>
        <div v-for="(item,index) in ticlist" :key="index" class="item" @click="selTic(item)">
          <span>票号:{{item.tikcetNo}}({{item.passengerName}})</span>
          <span>{{item.flightInfos[0].depAirportCode}}-{{item.flightInfos[0].arrAirportCode}}</span>
        </div>
      </ul>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
import { mapState } from 'vuex';
export default {
  name: 'addPassenger',
  created: function () {
    this.$store.commit('changeHeader', {
      left: '返回',
      right: '',
      middle: '增值服务',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    this.getData();
    this.LxName = this.loginData.userInfo.userLinkMan;
    this.LxNum = this.loginData.userInfo.userMobile;
    this.LxEmail = this.loginData.userInfo.userLinkEmail;
  },
  computed: mapState(['loginData', 'xingli']),
  data: function () {
    return {
      ticketNum: '',
      ticData: {},
      flightNo: '',
      passengerName: '',
      beginCityName: '',
      endCityName: '',
      depTime: '',
      arrTime: '',
      LxName: '',
      LxNum: '',
      LxEmail: '',
      islug: false,
      isfood: false,
      lugList: [],
      mealList: [],
      priTot: 0,
      hasLug: true,
      isdata: false,
      istics: false,
      ticlist: [],
      isAgree: false
    };
  },
  components: {
  },
  methods: {
    severText: function () {
      let content = {
        'columnId': '141',
        'detail': '',
        'listTitle': '增值服务购买须知',
        'detailTitle': '',
        'newsTypeId': '',
        'firstDate': [],
        'secondDate': []
      }
      this.$store.commit('sethelpCenter', content);
      this.$router.push('/helpCenterList')
    },
    submit: function () {
      let self = this;
      let payData = [];
      let payList = [];
      let payList2 = [];
      let payItem = {};
      for (let i = 0; i < this.mealList.length; i++) {
        for (let j = 0; j < this.mealList[i].data.length; j++) {
          if (this.mealList[i].data[j].ischeck) {
            payItem = {
              'ancillaryReq_id': this.mealList[i].data[j].westAirGoodsid,
              'ancillaryReq_name': this.mealList[i].data[j].goodsChName,
              'ancillaryReq_price': this.mealList[i].data[j].goodsPrice
            }
            payList.push(payItem)
          }
        }
      }
      if (payList.length !== 0) {
        let a = {
          'ancillaryReqs': payList,
          'segment_id': '1'
        }
        payData.push(a);
      }
      for (let i = 0; i < this.lugList.length; i++) {
        if (this.lugList[i].ischeck) {
          payItem = {
            'ancillaryReq_id': this.lugList[i].westAirGoodsid,
            'ancillaryReq_name': this.lugList[i].goodsChName,
            'ancillaryReq_price': this.lugList[i].goodsPrice
          }
          payList2.push(payItem)
        }
      }
      if (payList2.length !== 0) {
        let a = {
          'ancillaryReqs': payList2,
          'segment_id': '1'
        }
        payData.push(a);
      }
      if (payList.length === 0 && payList2.length === 0) {
        this.$store.dispatch('showTx', { text: '您还没有选择辅营产品' });
        return false
      }
      if (!self.isAgree) {
        self.$store.dispatch('showTx', { text: '您尚未同意各项服务条款' });
        return false;
      };
      if (this.LxName) {
        if (!this.$utils.regTest(this.LxName, 'anyName', this)) {
          return;
        }
      } else {
        self.$store.dispatch('showTx', { text: '请填写联系人' });
        return;
      }
      if (this.LxNum) {
        if (!this.$utils.regTest(this.LxNum, 'phoneNum', this)) {
          return;
        }
      } else {
        self.$store.dispatch('showTx', { text: '请填写联系电话' });
        return;
      }
      if (this.LxEmail) {
        if (!this.$utils.regTest(this.LxEmail, 'email', this)) {
          return;
        }
      } else {
        self.$store.dispatch('showTx', { text: '请填写联系邮箱' });
        return;
      }
      console.log(payData)
      let content = {
        'UserId': this.loginData.userInfo.userId,
        'email': this.LxEmail,
        'pasname': this.LxName,
        'pay_info': payData,
        'phonenum': this.LxNum,
        'ticketno': this.ticketNum
      }
      let data = this.$utils.getUserContent(content);
      console.log(data)
      this.$store.commit('showLoading');
      this.$http.post(this.$RS.auxiliary, data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          res = res.body
          console.log(res)
          if (res.code === 1000) {
            console.log(res.content);
            self.$store.commit('setOrderPayment', res.content)
            self.$router.push('/orderPayment')
          }
        },
        function (err) {
          // 响应错误回调
          this.$store.commit('closePop');
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    noLug: function () {
      this.hasLug = true;
      for (let i = 0; i < this.lugList.length; i++) {
        this.lugList[i].ischeck = false;
      }
      this.getPri() // 获取价格
      this.islug = false;
    },
    cancalFood: function () {
      this.isfood = false;
      /* for (let i = 0; i < this.mealList.length; i++) {
        for (let j = 0; j < this.mealList[i].data.length; j++) {
          this.mealList[i].data[j].ischeck = false;
        }
      }
      this.getPri() // 获取价格 */
    },
    foodClick: function () {
      this.isfood = false
    },
    checkFood: function (index0, index, val) {
      // 先还原同类的其他选择  再选中
      for (let j = 0; j < this.mealList[index0].data.length; j++) {
        this.mealList[index0].data[j].ischeck = false;
      }
      this.$set(this.mealList, index0, this.mealList[index0])
      let content = this.mealList[index0].data[index];
      content.ischeck = !val;
      this.$set(this.mealList[index0].data, index, content);
      this.getPri() // 获取价格
    },
    getPri: function () {
      this.priTot = 0;
      for (let i = 0; i < this.mealList.length; i++) {
        for (let j = 0; j < this.mealList[i].data.length; j++) {
          if (this.mealList[i].data[j].ischeck) {
            this.priTot += this.mealList[i].data[j].goodsPrice;
          }
        }
      }
      for (let i = 0; i < this.lugList.length; i++) {
        if (this.lugList[i].ischeck) {
          this.priTot += this.lugList[i].goodsPrice
        }
      }
    },
    checkLug: function (index) {
      // 先还原同类的其他选择  再选中
      for (let j = 0; j < this.lugList.length; j++) {
        this.lugList[j].ischeck = false;
      }
      let content = this.lugList[index];
      content.ischeck = !content.ischeck;
      this.$set(this.lugList, index, content)
      this.islug = false;
      this.getPri() // 获取价格
      this.hasLug = false;
    },
    selTic: function (item) {
      let data = {
        pzlxname: '票号',
        passengerName: this.xingli.data.passengerName,
        ticketNO: item.tikcetNo
      }
      this.$store.commit('setXingli', data)
      this.getData()
    },
    getData: function () {
      let self = this;
      let content = {};
      let url = ''
      if (this.xingli.data.pzlxname === '票号') {
        content = {
          'passengerName': this.xingli.data.passengerName,
          'ticketNO': this.xingli.data.ticketNO
        }
        url = this.$RS.queryAuxiliaryByTicketNO;
      } else if (this.xingli.data.pzlxname === '身份证') {
        content = {
          'identifierCode': 'NI',
          'idCardNum': this.xingli.data.ticketNO,
          'userName': this.xingli.data.passengerName
        }
        url = this.$RS.findTicketByIdCard;
      } else if (this.xingli.data.pzlxname === '护照') {
        content = {
          'identifierCode': 'PP',
          'idCardNum': this.xingli.data.ticketNO,
          'userName': this.xingli.data.passengerName
        }
        url = this.$RS.findTicketByIdCard;
      }
      let data = this.$utils.getUserContent(content);
      this.$store.commit('showLoading');
      console.log(url)
      this.$http.post(url, data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          res = res.body
          console.log(res)
          if (res.code === 1000) {
            if (res.content.description) {
              self.$store.dispatch('showTx', { text: res.content.description || '网络错误，请重试' });
              self.$router.go(-1)
              return
            }
            if (this.xingli.data.pzlxname === '护照' || this.xingli.data.pzlxname === '身份证') {
              if (res.content.length > 0) {
                self.istics = true;
                self.ticlist = res.content;
                return false;
              } else {
                self.$store.dispatch('showTx', { text: '未查询到可购买的增值服务' });
                self.$router.go(-1)
                return false;
              }
            }
            self.isdata = true
            self.ticData = res.content;
            self.flightNo = res.content.go.flightNo;
            self.ticketNum = res.content.ticketNum;
            self.passengerName = res.content.passengerName;
            self.beginCityName = res.content.go.beginCityName.split('_')[0];
            self.endCityName = res.content.go.endCityName.split('_')[0];
            self.depTime = self.getTime(res.content.go.depTime);
            self.arrTime = self.getTime(res.content.go.arrTime);
            let luglist = res.content.go.goodsdetails1.baggage ? res.content.go.goodsdetails1.baggage[0].data : [];
            let meallist = res.content.go.goodsdetails1.meal;
            for (let i = 0; i < meallist.length; i++) {
              for (let j = 0; j < meallist[i].data.length; j++) {
                meallist[i].data[j].ischeck = false;
              }
            }
            for (let i = 0; i < luglist.length; i++) {
              luglist[i].ischeck = false;
            }
            self.lugList = luglist;
            self.mealList = meallist;
            let meallist2 = meallist;
            self.mealOld = meallist2;
          } else if (res.code === 3040 || res.code === '3040') {
            self.$store.commit('setMsgCb', function () {
              self.$store.commit('closePop');
              self.$router.go(-1);
            });
            self.$store.commit('setMsg', {
              ifshow: true,
              showMsg: true,
              msgTitle: '温馨提示',
              msgContent: '该票号未查询到可销售的增值产品，请确认：</br>1.您输入的票号正确有效。</br>2.如果您已为该航段购买过增值产品，无法叠加购买同类型增值产品。</br>3.您有未支付订单，请在订单查询中查找订单并进行支付。</br>4.婴儿票不能在西航飞行加购买增值产品，请使用成人票号进行购买，或致电呼叫中心进行购买。</br>5.您输入的旅客姓名与票号姓名匹配。</br>6.宁波 、哈尔滨、广州 、九寨沟、 兰州 、温州暂不支持行李额预购。</br>7.西双版纳-昆明、西双版纳-重庆、昆明-重庆航线暂不支持餐食购买。</br>8.航班计划起飞时间36小时内不能预购机上餐饮;4小时内不能预购行李产品;2小时内不能预购贵宾厅和餐饮券产品;24小时内不能预购保险产品。</br>9.文山、汕头、库尔勒、珠海、大阪、北海道等出港城市不支持贵宾厅预购。</br>10.重庆、拉萨、郑州、文山、九寨沟、丽江、汕头、桂林市、库尔勒、珠海、泉州、深圳、阿克苏、西双版纳、绵阳、呼和浩特、太原、大阪、北海道、宿务等出港城市不支持餐饮券预购。</br>11.仅支持国内航线的保险预购。',
              msgBtn: '确定'
            });
          } else {
            console.log('out');
            this.$store.commit('closePop');
            this.$store.dispatch('showTx', { text: res.message || '网络错误，请重试' });
            self.$router.go(-1);
          }
        },
        function (err) {
          // 响应错误回调
          this.$store.commit('closePop');
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    getTime: function (time) {
      time = (time.split('T')[0] + ' ' + time.split('T')[1].split('.')[0]).replace(/-/g, '/')
      let a = new Date(time);
      let str = a.getFullYear() + '-' + ((a.getMonth() + 1) < 10 ? '0' + (a.getMonth() + 1) : (a.getMonth() + 1)) + '-' + (a.getDate() < 10 ? '0' + a.getDate() : a.getDate()) + ' ' + (a.getHours() < 10 ? '0' + a.getHours() : a.getHours()) + ':' + (a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes())
      console.log(str)
      return str;
    }
  }
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.bg-white
  background-color: #fff;
.padding-css3
  padding: f_times(0.7) f_times(0.7);
.margin-t-css1
  margin-top: f_times(0.7);
.bg-F2
  background-color: #F2F2F2;
.border-botttom
  border-bottom: 1px solid #EEE;
.padding-b-css1
  padding-bottom: f_times(0.7);
.f16
  font-size: f_times(1.12);
.padding-l-css2
  padding-left: f_times(1.39);
.color-B2B2B2, .yuzhongContent
  color: #B2B2B2;
.flytoImg
  height: f_times(1.12);
.margin-t-css2
  margin-top: f_times(1.4);
.lineHeight1
  line-height: f_times(1.4);
.Img1
  width: f_times(1.4);
.margin-l-css2
  margin-left: f_times(0.35);
.fontWei
  font-weight: 400;
.margin-l-css1
  margin-left: f_times(1.68);
.moneyColor
  color: #FF9D01;
.f12
  font-size: f_times(0.84);
.ft
  font-size: f_times(1.1);
.actImg1
  width: f_times(0.98);
.margin-r-css2
  margin-right: f_times(0.9);
.lxrContent .border-botttom
  height: f_times(3.15);
  line-height: f_times(3.15);
.border-botttom
  border-bottom: 1px solid #EEE;
.input-left
  width: f_times(8);
.mtb
  margin: f_times(0.3) 0;
#Footer_Reservation
  height: f_times(3);
  width: 100%;
  color: #FFF;
  border-top: 1px solid #dedede;
.padding-css2
  padding: 0 f_times(0.7);
.btn2
  width: f_times(7);
  height: 100%;
.bg-color-main
  background-color: #843D99;
.div-none
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: #000;
  z-index: 9998;
.layertips
  position: fixed;
  bottom: 0;
  z-index: 9999;
.padding-css1
  padding: f_times(1.4) 0;
.img5div
  width: 20%;
.foots
  background-color: #fafafa;
.padding-01
  padding: 0 f_times(0.7);
.indeximg-height
  height: f_times(5.6);
.ticket-border
  border-bottom: 1px solid #eee;
.indeximg-height
  height: f_times(5.6);
.index-height
  height: f_times(3.8);
  width: f_times(5);
.padding-b05
  padding-bottom: f_times(0.35);
.bc-FF9E04
  color: #FF9E04;
.img4
  width: f_times(1.4);
.foodlist
  top: f_times(2.5);
  overflow-y: scroll;
.navItem-height
  height: f_times(2.8);
.margin-l1
  margin-left: f_times(0.7);
.bg-843d99
  background-color: #843d99;
.width-30
  width: 30%;
.bc-white
  color: #fff;
.bc-FF9E04
  color: #FF9E04;
#footerList
  border-top: 1px solid #dedede;
.bottom-height
  height: f_times(3.5);
.padding-l05
  padding-left: f_times(0.35);
  font-size: f_times(0.8);
  color: #999;
  line-height: f_times(1);
.top
  top: f_times(2.5) !important;
.disAgree
  background-image: url('../flights/form_radio.png');
.Agree
  background-image: url('../flights/form_tick@2x.png');
.agree
  margin-bottom: f_times(3);
.color-main
  color: #843D99;
.ServerImgs
  width: f_times(1.3);
  height: f_times(1.3);
.foodpad
  padding-bottom: f_times(3);
</style>